<template>
	<view class="page">
		<!-- 导航栏 -->
		<view class="navbar">
			<view class="navbar-content">
				<view class="back-button" @click="goBack">
					<uni-icons type="back" size="30" color="#ffff"></uni-icons>
				</view>
				<text class="navbar-title">洗车店详情</text>
			</view>
		</view>
		
		<!-- 蓝色背景 -->
		<view class="blue-background"></view>
		
		<!-- 整体内容容器 -->
		<view class="main-content-container">
			<!-- 第一个内容框：横幅图片 + 服务站信息 -->
			<view class="first-content-container">
				<!-- 横幅图片 -->
				<view class="banner-container">
					<image class="banner-image" src="/static/服务站.jpg" mode="aspectFill"></image>
					
					
				</view>
				
				<!-- 服务站信息 -->
				<view class="station-info">
					<text class="station-title">车百事汽车生活馆</text>
					<view class="rating-section">
						<view class="stars">
							<text class="star">★</text>
							<text class="star">★</text>
							<text class="star">★</text>
							<text class="star">★</text>
						</view>
						<text class="rating-score">4分</text>
						<text class="sales">销量:556</text>
					</view>
					<text class="business-hours">营业时间: 周一至周五 早上8:00-晚上22:00</text>
					<view class="location-section">
						<text class="location">位置: 山阳区人民路与解放路交叉口</text>
						<image class="plane-icon" src="/static/plane.png" mode="aspectFit"></image>
					</view>
				</view>
			</view>
			
			<!-- 第二个内容框：服务项目 -->
			<view class="second-content-container">
				<!-- 服务项目 -->
				<view class="service-section">
					<text class="section-title">服务项目</text>
					<view class="service-options">
						<view class="service-option" :class="{ active: selectedService === 'normal' }" @click="selectService('normal')">
							<view class="radio-button" :class="{ active: selectedService === 'normal' }"></view>
							<text class="option-text">普通洗车</text>
						</view>
						<view class="service-option" :class="{ active: selectedService === 'fine' }" @click="selectService('fine')">
							<view class="radio-button" :class="{ active: selectedService === 'fine' }"></view>
							<text class="option-text">精洗</text>
						</view>
						<view class="service-option" :class="{ active: selectedService === 'interior' }" @click="selectService('interior')">
							<view class="radio-button" :class="{ active: selectedService === 'interior' }"></view>
							<text class="option-text">内饰清洗</text>
						</view>
						<view class="service-option" :class="{ active: selectedService === 'other' }" @click="selectService('other')">
							<view class="radio-button" :class="{ active: selectedService === 'other' }"></view>
							<text class="option-text">其他清洗</text>
						</view>
					</view>
					<view class="price-section">
						<text class="current-price">¥35.9</text>
						<text class="original-price">¥60</text>
					</view>
					<text class="service-description">这里是精洗服务的详细介绍,这里是精洗服务的详细介绍,这里是精洗服务的详细介绍</text>
				</view>
			</view>
			
			<!-- 第三个内容框：服务评价 -->
			<view class="third-content-container">
				<!-- 服务评价 -->
				<view class="reviews-section">
					<text class="section-title">服务评价</text>
					<view v-for="(review, index) in reviews" :key="index" class="review-item">
						<image class="avatar" src="/static/头像.jpg" mode="aspectFill"></image>
						<view class="review-content">
							<view class="review-header">
								<text class="user-name">{{ review.userName }}</text>
								<view class="review-stars">
									<text class="star">★</text>
									<text class="star">★</text>
									<text class="star">★</text>
									<text class="star">★</text>
									<text class="star">★</text>
								</view>
								<text class="review-date">{{ review.date }}</text>
							</view>
							<text class="review-text">{{ review.text }}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 底部操作栏 -->
		<view class="bottom-bar">
			<view class="contact-service" @click="contactService">
				<image class="service-icon" src="/static/客服.png" mode="aspectFit"></image>
				<text class="service-text">联系客服</text>
			</view>
			<view class="order-button" @click="placeOrder">
				<text class="order-text">立即下单</text>
			</view>
		</view>
		
		<!-- 联系客服弹出框 -->
		<view v-if="showContactModal" class="contact-modal" @click="closeContactModal">
			<view class="modal-content" @click.stop>
				<view class="phone-section">
					<text class="phone-number">{{ phoneNumber }}</text>
				</view>
				<view class="divider"></view>
				<view class="copy-section" @click="copyPhoneNumber">
					<text class="copy-text">复制</text>
				</view>
				<view class="divider"></view>
				<view class="cancel-section" @click="closeContactModal">
					<text class="cancel-text">取消拨号</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				selectedService: 'fine',
				showContactModal: false,
				phoneNumber: '18642589456',
				reviews: [
					{
						userName: '黄**',
						date: '2022-12-31',
						text: '洗的非常干净,几个小伙子很用心,态度也很好,强烈推荐来这家店洗车!!!'
					},
					{
						userName: '黄**',
						date: '2022-12-31',
						text: '洗的非常干净,几个小伙子很用心,态度也很好,强烈推荐来这家店洗车!!!'
					},
					{
						userName: '黄**',
						date: '2022-12-31',
						text: '洗的非常干净,几个小伙子很用心,态度也很好,强烈推荐来这家店洗车!!!'
					}
				]
			}
		},
		methods: {
			goBack() {
				uni.navigateBack();
			},
			selectService(service) {
				this.selectedService = service;
			},
			contactService() {
				this.showContactModal = true;
			},
			closeContactModal() {
				this.showContactModal = false;
			},
			copyPhoneNumber() {
				// 复制电话号码到剪贴板
				uni.setClipboardData({
					data: this.phoneNumber,
					success: () => {
						uni.showToast({
							title: '复制成功',
							icon: 'success'
						});
						this.closeContactModal();
					}
				});
			},
			placeOrder() {
				// 获取当前选中的服务信息
				const serviceMap = {
					'normal': { name: '普通洗车', price: '25.9' },
					'fine': { name: '精洗服务', price: '35.9' },
					'interior': { name: '内饰清洗', price: '45.9' },
					'other': { name: '其他清洗', price: '55.9' }
				}
				const selectedServiceInfo = serviceMap[this.selectedService] || serviceMap['fine']
				
				// 构建订单参数
				const orderParams = {
					orderNo: 'CW' + Date.now(),
					serviceType: selectedServiceInfo.name,
					appointmentTime: '2024-01-15 14:00',
					address: '山阳区人民路与解放路交叉口',
					phone: this.phoneNumber,
					serviceName: selectedServiceInfo.name,
					price: selectedServiceInfo.price
				}
				
				// 跳转到订单详情页
				const query = Object.keys(orderParams)
					.map(key => `${key}=${encodeURIComponent(orderParams[key])}`)
					.join('&')
				
				uni.navigateTo({
					url: `/index-item/CarWashOrder/index?${query}`
				})
			}
		}
	}
</script>

<style>
	.page {
		background-color: #f5f6fa;
		min-height: 100vh;
		position: relative;
	}
	
	/* 导航栏 */
	.navbar {
		width: 100%;
		height: 88rpx;
		background: linear-gradient(120deg, #1f78ff 0%, #2f89ff 100%);
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.navbar-content {
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
		position: relative;
		padding: 0 24rpx;
	}
	
	.back-button {
		position: absolute;
		left: 24rpx;
		width: 60rpx;
		height: 60rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.back-icon {
		color: #ffffff;
		font-size: 40rpx;
		font-weight: bold;
		line-height: 1;
		margin-left: -2rpx;
	}
	
	.navbar-title {
		color: #ffffff;
		font-size: 32rpx;
		font-weight: 600;
		text-align: center;
		width: 100%;
	}
	
	/* 蓝色背景 */
	.blue-background {
		position: absolute;
		top: 88rpx;
		left: 0;
		width: 100%;
		height: 200rpx;
		background: linear-gradient(120deg, #1f78ff 0%, #2f89ff 100%);
	}
	
	/* 整体内容容器 */
	.main-content-container {
		position: absolute;
		top: 100rpx;
		left: 50%;
		transform: translateX(-50%);
		width: 94%;
		max-width: 750rpx;
		z-index: 10;
	}
	
	/* 第一个内容框：横幅图片 + 服务站信息 */
	.first-content-container {
		background: #ffffff;
		border-radius: 20rpx;
		box-shadow: 0 4rpx 20rpx rgba(0,0,0,0.1);
		overflow: hidden;
		margin-bottom: 20rpx;
		padding: 20rpx;
	}
	
	/* 横幅图片容器 */
	.banner-container {
		position: relative;
		width: 100%;
		height: 300rpx;
		margin-bottom: 20rpx;
		border-radius: 16rpx;
		overflow: hidden;
	}
	
	.banner-image {
		width: 100%;
		height: 100%;
	}
	
	.banner-overlay {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: linear-gradient(to bottom, rgba(0,0,0,0.4), rgba(0,0,0,0.2));
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
		padding: 40rpx 24rpx;
	}
	
	.banner-left {
		display: flex;
		flex-direction: column;
	}
	
	.banner-right {
		display: flex;
		align-items: flex-start;
	}
	
	.station-name {
		color: #ffffff;
		font-size: 40rpx;
		font-weight: 700;
		margin-bottom: 12rpx;
		text-shadow: 0 2rpx 4rpx rgba(0,0,0,0.5);
	}
	
	.phone-number {
		color: #ffffff;
		font-size: 26rpx;
		opacity: 0.95;
		text-shadow: 0 1rpx 2rpx rgba(0,0,0,0.5);
	}
	
	.logo {
		display: flex;
		align-items: center;
		gap: 12rpx;
	}
	
	.plane-icon {
		width: 40rpx;
		height: 40rpx;
	}
	
	.logo-text-container {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
	}
	
	.logo-text {
		color: #ffffff;
		font-size: 28rpx;
		font-weight: 700;
		text-shadow: 0 1rpx 2rpx rgba(0,0,0,0.5);
	}
	
	.logo-subtitle {
		color: #ffffff;
		font-size: 22rpx;
		opacity: 0.9;
		text-shadow: 0 1rpx 2rpx rgba(0,0,0,0.5);
		margin-top: 2rpx;
	}
	
	/* 第二个内容框：服务项目 */
	.second-content-container {
		background: #ffffff;
		padding: 24rpx;
		margin: 20rpx 0;
		border-radius: 20rpx;
		box-shadow: 0 4rpx 20rpx rgba(0,0,0,0.1);
	}
	
	/* 第三个内容框：服务评价 */
	.third-content-container {
		background: #ffffff;
		border-radius: 20rpx;
		box-shadow: 0 4rpx 20rpx rgba(0,0,0,0.1);
		padding: 24rpx;
		margin-bottom: 120rpx;
	}
	
	/* 服务站信息 */
	.station-info {
		padding: 0;
	}
	
	.station-title {
		color: #333333;
		font-size: 32rpx;
		font-weight: 600;
		margin-bottom: 16rpx;
		display: block;
	}
	
	.rating-section {
		display: flex;
		align-items: center;
		gap: 8rpx;
		margin-bottom: 12rpx;
	}
	
	.stars {
		display: flex;
		gap: 4rpx;
	}
	
	.star {
		color: #ffd700;
		font-size: 24rpx;
	}
	
	.rating-score {
		color: #333333;
		font-size: 24rpx;
		margin-left: 8rpx;
	}
	
	.sales {
		color: #666666;
		font-size: 24rpx;
		margin-left: 16rpx;
	}
	
	.business-hours {
		color: #666666;
		font-size: 24rpx;
		margin-bottom: 12rpx;
		display: block;
	}
	
	.location-section {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	
	.location {
		color: #666666;
		font-size: 24rpx;
		flex: 1;
	}
	
	.plane-icon {
		width: 32rpx;
		height: 32rpx;
	}
	
	/* 服务项目 */
	.service-section {
		margin-bottom: 32rpx;
	}
	
	.section-title {
		color: #333333;
		font-size: 28rpx;
		font-weight: 600;
		margin-bottom: 16rpx;
		display: block;
	}
	
	.service-options {
		display: flex;
		gap: 20rpx;
		margin-bottom: 20rpx;
		flex-wrap: wrap;
	}
	
	.service-option {
		display: flex;
		align-items: center;
		padding: 0;
		background: transparent;
		flex: 1;
		min-width: 0;
	}
	
	.radio-button {
		width: 28rpx;
		height: 28rpx;
		border: 2rpx solid #d0d0d0;
		border-radius: 50%;
		margin-right: 12rpx;
		position: relative;
		background: #ffffff;
		flex-shrink: 0;
	}
	
	.radio-button.active {
		border-color: #1f78ff;
		background: #1f78ff;
	}
	
	.radio-button.active::after {
		content: '';
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 14rpx;
		height: 14rpx;
		background: #ffffff;
		border-radius: 50%;
	}
	
	.option-text {
		color: #333333;
		font-size: 24rpx;
		font-weight: 500;
		flex: 1;
	}
	
	.price-section {
		display: flex;
		align-items: center;
		gap: 12rpx;
		margin-bottom: 16rpx;
	}
	
	.current-price {
		color: #ff4757;
		font-size: 32rpx;
		font-weight: 600;
	}
	
	.original-price {
		color: #999999;
		font-size: 24rpx;
		text-decoration: line-through;
	}
	
	.service-description {
		color: #666666;
		font-size: 24rpx;
		line-height: 1.5;
	}
	
	/* 服务评价 */
	.reviews-section {
		margin-bottom: 120rpx;
	}
	
	.review-item {
		display: flex;
		gap: 16rpx;
		margin-bottom: 24rpx;
	}
	
	.avatar {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
		flex-shrink: 0;
	}
	
	.review-content {
		flex: 1;
	}
	
	.review-header {
		display: flex;
		align-items: center;
		gap: 12rpx;
		margin-bottom: 8rpx;
	}
	
	.user-name {
		color: #333333;
		font-size: 24rpx;
		font-weight: 600;
	}
	
	.review-stars {
		display: flex;
		gap: 2rpx;
	}
	
	.review-date {
		color: #999999;
		font-size: 20rpx;
		margin-left: auto;
	}
	
	.review-text {
		color: #666666;
		font-size: 24rpx;
		line-height: 1.5;
	}
	
	/* 底部操作栏 */
	.bottom-bar {
		position: fixed;
		bottom: 0;
		left: 50%;
		transform: translateX(-50%);
		width: 94%;
		max-width: 750rpx;
		background: #ffffff;
		padding: 20rpx 24rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		box-shadow: 0 -2rpx 10rpx rgba(0,0,0,0.1);
		z-index: 20;
	}
	
	.contact-service {
		display: flex;
		align-items: center;
		gap: 8rpx;
	}
	
	.service-icon {
		width: 32rpx;
		height: 32rpx;
	}
	
	.service-text {
		color: #666666;
		font-size: 24rpx;
	}
	
	.order-button {
		background: #1f78ff;
		border-radius: 40rpx;
		padding: 20rpx 40rpx;
	}
	
	.order-text {
		color: #ffffff;
		font-size: 28rpx;
		font-weight: 600;
	}
	
	/* 联系客服弹出框 */
	.contact-modal {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.5);
		display: flex;
		align-items: flex-end;
		z-index: 1000;
	}
	
	.modal-content {
		width: 100%;
		background: #ffffff;
		border-radius: 20rpx 20rpx 0 0;
		overflow: hidden;
		box-shadow: 0 -4rpx 20rpx rgba(0, 0, 0, 0.1);
	}
	
	.phone-section {
		padding: 60rpx 20rpx;
		text-align: center;
		background: #ffffff;
	}
	
	.phone-number {
		color: #333333;
		font-size: 48rpx;
		font-weight: normal;
		font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif;
	}
	
	.divider {
		height: 1rpx;
		background: #e5e5e5;
		margin: 0;
	}
	
	.copy-section {
		padding: 50rpx 20rpx;
		text-align: center;
		background: #ffffff;
	}
	
	.copy-text {
		color: #1f78ff;
		font-size: 36rpx;
		font-weight: normal;
		font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif;
	}
	
	.cancel-section {
		padding: 50rpx 20rpx;
		text-align: center;
		background: #ffffff;
	}
	
	.cancel-text {
		color: #666666;
		font-size: 36rpx;
		font-weight: normal;
		font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif;
	}
</style>